<!--版本升级-->
<template>
  <div class="page">
    <div class="bg-mask" @click="!forceStatus ? dismiss() : defclick()"></div>
    <div class="bg">
      
      <div v-if="data" class="content-box" @click="defclick">
        <div class="content-level1">
          <div class="bg-top-box">
            <div class="bg-top">
              <div class="circle" style="width:35px;height:35px;left:11px;top:87px;border-radius:35px;"></div>
              <div class="circle" style="width:59px;height:59px;left:243px;top:114px;border-radius:59px;"></div>
              <div class="circle" style="width:16px;height:16px;left:318px;top:81px;border-radius:16px;"></div>
              <div class="circle" style="width:16px;height:16px;left:489px;top:85px;border-radius:16px;"></div>
              <LImage class="star" style="width:23px;height:30px;left:28px;top:11px;" :src="ICON.popup_image_yellowStar"></LImage>
              <LImage class="star" style="width:22px;height:29px;right:8px;top:9px;" :src="ICON.popup_image_yellowStar"></LImage>
              <LImage class="star" style="width:28px;height:37px;left:283px;top:29px;" :src="ICON.popup_image_writeStar"></LImage>
              <LImage class="star" style="width:15px;height:21px;left:369px;top:51px;" :src="ICON.popup_image_writeStar"></LImage>
              <LImage class="star" style="width:15px;height:21px;left:40px;top:164px;" :src="ICON.popup_image_writeStar"></LImage>
              <LImage class="star" style="width:27px;height:36px;left:438px;top:139px;" :src="ICON.popup_image_writeStar"></LImage>
            </div>
          </div>
          <div class="top-box">
            <text class="title">{{T('发现新版本')}}</text>
            <text class="version" v-if="data.bundleVersionCode == undefined || data.bundleVersionCode == 0">{{data.versionName}}</text>
            <text class="version" v-else>{{data.versionName+'_'+data.bundleVersionCode}}</text>
            <div  class="info-box">
              <text v-if="data.updateLog" class="info-text">{{data.updateLog}}</text>
            </div>
          </div>
        </div>
        <div class="content-level2">
          <LImage class="xiao-fu-jian" :src="ICON.popup_image_rocket"></LImage>
          <div class="btn1" @click="upgrade">
            <text class="btn1-text">{{T('立即升级')}}</text>
          </div>
          <div v-if="!forceStatus" class="btn2" @click="dismiss">
            <text class="btn2-text">{{T('暂不升级')}}</text> 
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import navigator from "@/_js/navigator";
import ICON from "@/_js/icon";
import jconfig from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");
import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;

var versionInfo = {};

export default {
  
  data() {
    return {
      T:T,
      ICON:ICON,
      data:{versionName:"---"},
      version:"",
      forceStatus:false,
      showLog:true,
    };
  },

  created(){
    var upgradeInfo = navigator.getParam("upgradeInfo");
    if(upgradeInfo){
      this.data = JSON.parse(upgradeInfo);
    }else{
      weexFunction.getVersionCode((data)=>{
        versionInfo = JSON.parse(data);
        this.version = versionInfo.versionName;
        this.checkVersion();
      });
    }
    // -downloadUrl 下载地址 -forceStatus true 开启强制更新 false 没有开启强制更新 -versionCode 版本号 -versionName 版本名称 -updateLog 更新日志
  },

  mounted() {
  },

  methods: {
    checkVersion(){
      weexHttp.post("systemV2/checkVersionV2",{"osType":versionInfo.osType},false,(data)=>{

        // -downloadUrl 下载地址 -forceStatus true 开启强制更新 false 没有开启强制更新 -versionCode 版本号 -versionName 版本名称 -updateLog 更新日志
        var upgradeInfo = data;
        if(upgradeInfo.status == 200){
          this.data = upgradeInfo.data;
          this.forceStatus = upgradeInfo.data.forceStatus;
        }else{
          navigator.dismiss();
        }
      });
    },
    dismiss(){
      navigator.dismiss();
    },
    upgrade(){
      if (this.data.downloadUrl.includes("testflight")) {
        weexFunction.upgrade(this.data.downloadUrl);
      } else {
        weexFunction.upgrade(jconfig.download);
      }
    },
    defclick(){}
  }
};

</script>

<style scoped>
.page{
  width:750px;
  position:absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
}
.bg-mask {
  width: 750px;
  position:absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
  z-index: 1;

  background-color:rgba(0,0,0,1);
  opacity:0.4;
}
.bg{
  width: 750px;
  position:absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;
  z-index: 2;

  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.xiao-fu-jian{
  width:184px;
  height:224px;
  position: absolute;
  right:0;
  top:0;
  z-index: 6;
}

.content-box{
  width:540px;
  overflow:hidden;
}
.content-level1{
  width:540px;
  margin-top:44px;
  padding-bottom:165px;
  
  background-color:rgba(255,255,255,1);
  border-radius:10px;
  overflow:hidden;
}
.content-level2{
  width:540px;
  /* height:768px; */
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  z-index:2;

  overflow:hidden;

  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.bg-top-box{
  width:1000px;
  height:1000px;
  position: absolute;
  left:-230px;
  top:-683px;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
  /* background-color:rgb(70,147,243); */
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.bg-top{
  width:540px;
  height:317px;
  background-image:linear-gradient(to bottom right,rgba(70,147,243,1),rgba(47,53,219,1));
}

.circle{
  position:absolute;
  background-color:rgba(255,255,255,1);
  opacity:0.13;
}
.star{
  position:absolute;
}

.top-box{
  width:540px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
}

.title{
  width:540px;
  padding-left:60px;
  margin-top:49px;
  font-size:42px;
  font-family:Noto Sans S Chinese;
  font-weight:500;
  color:rgba(253,250,249,1);
  text-shadow:0px 9px 10px rgba(113,103,247,0.48);
}
.version{
  width:540px;
  padding-left:60px;
  margin-top:15px;
  font-size:36px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(253,250,249,1);
  text-shadow:0px 9px 10px rgba(113,103,247,0.48);
}

.info-box{
  width:480px;
  min-height: 335px;
  margin-top:44px;
}
.info-text{
  width:480px;
  padding:56px 40px; 
  /* height: 335px; */
  text-align: left;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(50,55,60,1);
  background-color:rgba(255,255,255,1);
  box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
  border-radius:10px;
}

.btn1{
  width:480px;
  height:70px;
  margin-bottom:20px;
  background-image:linear-gradient(to bottom right,rgba(83,196,254,1),rgba(73,69,248,1));
  border-radius:70px;

  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn1-text{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
}
.btn2{
  width:480px;
  height:70px;
  margin-bottom:40px;
  border-width:2px;
  border-color: rgba(67,135,240,1);
  border-radius:70px;

  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn2-text{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(67,135,240,1);
}


.log{
  width:750px;
  background-color:#ffffff;
  color:#333;
  font-size:22px;
  position:fixed;
  z-index: 999;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
</style>